<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <el-row style="text-align: right">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline">
          <el-form-item label="账号">
            <el-input
              size="small"
              v-model="formInline.user"
              placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small">
              查询
            </el-button>
            <el-button size="small">重置</el-button>
            <el-button type="text">
              展开
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row
        style="margin: 5px 0px"
        type="flex"
        justify="space-around">
        <el-col :span="12">
          <el-button
            type="primary"
            size="medium"
            icon="el-icon-plus"
            @click="addUser">
            新增
          </el-button>
        </el-col>
        <el-col
          :span="12"
          style="text-align: right"></el-col>
      </el-row>
      <el-table
        border
        :data="userListData"
        stripe
        size="small"
        v-loading="loading"
        style="width: 100%; margin-bottom: 3px">
        <el-table-column
          type="selection"
          width="55"></el-table-column>
        <el-table-column
          prop="nick_name"
          label="用户名"
          width="180"></el-table-column>
        <el-table-column
          prop="name"
          label="账号"
          width="180"></el-table-column>
        <el-table-column
          prop="role"
          label="角色"
          min-width="180">
          <template slot-scope="scope">
            {{ roleListOptions.find(el => el.value == scope.row.roles).label }}
          </template>
        </el-table-column>
        <el-table-column
          prop="balance"
          label="余额"
          min-width="180"></el-table-column>
        <el-table-column
          prop="app_key"
          label="app_key"
          min-width="180"></el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          min-width="180"></el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          min-width="240">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editUserAction(scope.row)"
              size="small">
              编辑
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              @click="rechargeUserAction(scope.row)"
              size="small"
              style="color: #e6a23c">
              充值
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              @click="resetUserPasswordAction(scope.row)"
              size="small"
              style="color: #f56c6c">
              重置密码
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              @click="getUserAuth(scope.row)"
              size="small">
              获取Auth
            </el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              @click="showUserProduct(scope.row)"
              size="small"
              style="color: #67C23A">
              查看产品
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total,sizes, prev, pager, next, jumper, slot"
        :total="total">
        <span style="line-height: 28px; margin-left: 5px">
          <el-button
            type="text"
            @click="refreshAction"
            :loading="loading">
            {{ loading ? '' : '刷新' }}
          </el-button>
        </span>
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
  import { getList, userRecharge, resetPassword, getUserAuthentication } from '@/api/user';
  import Add from '@/views/user/add';
  import ShowUserProduct from '@/views/user/showUserProduct';
  import { roleListOptions } from '@/data/user';
  export default {
    name: 'index',
    data() {
      return {
        userListData: [],
        formInline: {},
        checkedUser: null,
        pageSize: 10,
        currentPage: 1,
        roleListOptions,
        loading: false,
        total: 0,
      };
    },
    created() {
      this.getListData();
    },
    methods: {
      getListData() {
        this.loading = true;
        getList({ page: this.currentPage, limit: this.pageSize, where: {} }).then(res => {
          this.$set(this, 'userListData', res.data.data);
          this.$set(this, 'total', res.data.total);
          this.loading = false;
        });
      },
      addUser() {
        this.showUserDialog(0);
      },
      editUserAction(row) {
        this.showUserDialog(row.id);
      },
      showUserDialog(userId) {
        this.$createDialog({
          title: '编辑用户',
          component: Add,
          props: {
            userId: userId,
          },
          buttons: [{ text: '确定', callback: 'handleSubmit', name: 'submit' }],
        });
      },
      refreshAction() {
        this.$set(this, 'currentPage', 1);
        this.$set(this, 'pageSize', 10);
        this.getListData();
      },
      handleSizeChange(val) {
        this.$set(this, 'currentPage', 1);
        this.$set(this, 'pageSize', val);
        this.getListData();
      },
      handleCurrentChange(val) {
        this.$set(this, 'currentPage', val);
        this.getListData();
      },
      rechargeUserAction(row) {
        this.$prompt('请输入金额', '用户充值', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^(\-|\+)?\d+(.[0-9]{0,4})?$/,
          inputType: 'number',
          inputErrorMessage: '请输入正确的数值',
        })
          .then(({ value }) => {
            userRecharge({ user_id: row.id, recharge_amount: value }).then(res => {
              this.$message({
                type: 'success',
                message: res.message,
              });
            });
          })
          .catch(() => {});
      },
      resetUserPasswordAction(row) {
        this.$confirm('此操作将重置用户密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            resetPassword({ user_id: row.id }).then(res => {
              this.$message({
                message: res.message,
                type: 'success',
                duration: 10000,
              });
            });
          })
          .catch(() => {});
      },
      getUserAuth(row) {
        getUserAuthentication({ user_id: row.id }).then(res => {
          this.$alert(
            `<p style="word-wrap:break-word;word-break:break-all;overflow:hidden;">${res.data}</p>`,
            '用户Authentication',
            {
              confirmButtonText: '确定',
              dangerouslyUseHTMLString: true,
            },
          );
        });
      },
      showUserProduct(row){
        this.$createDialog({
          title: '查看用户产品',
          component: ShowUserProduct,
          props: {
            userId: row.id,
          }
        });
      }
    },
  };
</script>
